<template>
	<view>
		<!-- 顶部标题 -->
		<shop-title :shopInfo="shopDesc"></shop-title>
		<!-- 选项卡切换 -->
		<tabs @selectCard="selectCard"></tabs>
		<!-- 订餐窗口 -->
		<order-form v-show="cardIndex === 0" :goodsList="goodsList" :shopDesc="shopDesc"></order-form>
		<!-- 评论窗口 -->
		<commend-form v-show="cardIndex === 1" :commentList="commentList"></commend-form>
		<bussiness-form v-show="cardIndex === 2" :businessInfo="shopDesc"></bussiness-form>
	</view>
</template>

<script>
	import ShopTitle from './components/ShopTitle.vue'
	import Tabs from './components/Tabs.vue'
	import OrderForm from './components/OrderForm.vue'
	import CommendForm from './components/CommentForm.vue'
	import BussinessForm from './components/BusinessForm.vue'

	import {
		getShopDesc,
		getGoodsList,
		getCommentList
	} from '../../network/detail.js'

	export default {
		components: {
			ShopTitle,
			Tabs,
			OrderForm,
			CommendForm,
			BussinessForm
		},
		data() {
			return {
				// 选项卡索引
				cardIndex: 0,
				// 商家唯一标识
				shopId: -1,
				// 商家介绍
				shopDesc: {},
				// 商品数据
				goodsList: [],
				// 评论数据
				commentList: []
			}
		},
		methods: {
			// 切换tab选项卡
			selectCard(index) {
				this.cardIndex = index
			},
			// 请求接口数据
			requestData(sid) {
				const data = {
					openid: sid
				}
				let shopDesc = getShopDesc(data)
				let goodsList = getGoodsList(data)
				let commentList = getCommentList(data)
				let requestArr = [shopDesc, goodsList, commentList]
				Promise.all(requestArr.map(promise =>
					promise.catch(e => {
						console.log(e)
					})
				)).then(res => {
					this.shopDesc = res[0].data[0]
					this.goodsList = res[1].data.map(item => {
						item.objdis.count = 0
						return item
					})
					this.commentList = res[2].data
				})
			}
		},
		onLoad(option) {
			this.shopId = option.id
			this.requestData(this.shopId)
		}
	}
</script>

<style scoped>

</style>
